
<!--用户权限配置-->
<template>
  <div>
    <div class="ca_config_ul" v-loading="loading">
      <ul>
        <li>
          <label>配置说明</label>
          <span class="con">配置设置</span>
          <span class="trips">配置描述</span>
        </li>
        <li>
          <label>默认院区</label>
          <span class="con">
            <el-select filterable class="w-100" v-model="formdata.areaName" @change="areaNameChange" clearable size="small" placeholder="请选择">
              <el-option
                v-for="(item, index) in areaNameOptions"
                :key="index"
                :value="item"
                :label="item"
              ></el-option>
            </el-select>
          </span>
          <span class="trips">页面是否启用只显示默认选中的院区</span>
        </li>
        <li>
          <label>默认影像区域</label>
          <span class="con">
            <el-select filterable class="w-100" v-model="formdata.depArea" @change="depAreaChange" clearable size="small" placeholder="请选择">
              <el-option
                v-for="(item, index) in depAreaOptions"
                :key="index"
                :value="item"
                :label="item"
              ></el-option>
            </el-select>
          </span>
          <span class="trips">页面是否启用只显示默认选中的影像区域</span>
        </li>
        <!--<li>
          <label>默认预约来源</label>
          <span class="con">
            <el-select filterable class="w-100" v-model="formdata.appointSource" @change="depAreaChange" clearable size="small" placeholder="请选择">
              <el-option
                v-for="(item, index) in appointTypeOptions"
                :disabled="appointSourceFlag && (appointSourceNameList || ['自助预约','移动预约']).includes(item)&&(!$hasPermission(['YJYY10008098']))"
                :key="index"
                :value="item"
                :label="item"
              ></el-option>
            </el-select>
          </span>
          <span class="trips">页面是否启用只显示默认选中的预约来源</span>
        </li>-->
        <li v-show="!isChooseDeps">
          <label>默认检查部门</label>
          <span class="con">
            <el-select filterable class="w-100" v-model="formdata.dep" clearable size="small" @change="depChange" placeholder="请选择">
              <el-option
                v-for="(item, index) in depOptions"
                :key="index"
                :value="item"
                :label="item"
              ></el-option>
            </el-select>
          </span>
          <span class="trips">页面是否启用只显示默认选中的检查部门</span>
        </li>
        <li v-show="isChooseDeps">
          <label>默认检查部门</label>
          <span class="con">
            <el-select filterable class="w-100" multiple v-model="formdata.deps" clearable size="small" @change="depChange" placeholder="请选择">
              <el-option
                v-for="(item, index) in depOptions"
                :key="index"
                :value="item"
                :label="item"
              ></el-option>
            </el-select>
          </span>
          <span class="trips">页面是否启用只显示默认选中的检查部门</span>
        </li>
        <li>
          <label>默认设备类型</label>
          <span class="con">
            <el-select filterable class="w-100" v-model="formdata.modalitytype" @change="modalitytypeChange" clearable size="small" placeholder="请选择">
              <el-option
                v-for="(item, index) in modalitytypeOptions"
                :key="index"
                :value="item"
                :label="item"
              ></el-option>
            </el-select>
          </span>
          <span class="trips">页面是否启用只显示默认选中的设备类型</span>
        </li>
        <li>
          <label>默认登记机房</label>
          <span class="con">
            <el-select filterable class="w-100" v-model="formdata.registerRoom" clearable size="small" placeholder="请选择">
              <el-option
                v-for="(item, index) in registerRoomOptions"
                :key="index"
                :value="item"
                :label="item"
              ></el-option>
            </el-select>
          </span>
          <span class="trips">临床预约页面是否启用显示默认预约来源</span>
        </li>
        <li>
          <label>默认病区</label>
          <span class="con">
            <el-select filterable class="w-100" v-model="formdata.inpatientWard" clearable size="small" placeholder="请选择">
              <el-option
                v-for="(item,index) in wardNoOptions"
                :key="index"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </span>
          <span class="trips">已预约记录修改页面是否绑定该病区作为筛选条件</span>
        </li>
        <li>
          <label>默认预约来源</label>
          <span class="con">
            <el-select filterable class="w-100" v-model="formdata.appointType" clearable size="small" placeholder="请选择">
              <el-option
                v-for="item in appointTypeOptions"
                :key="item.index"
                :value="item.label"
                :disabled="item.disabled"
                :label="item.label"
              ></el-option>
            </el-select>
          </span>
          <span class="trips">临床预约页面是否启用只显示默认预约来源</span>
        </li>
        <li v-if="isMoreReadCardCheck">
          <label>读卡器默认设备</label>
          <span class="con">
            <el-select class="w-100" v-model="formdata.defaultReadCard" clearable size="small" placeholder="请选择">
              <el-option
                v-for="(item, index) in moreReadCardCheckStrArr"
                :key="index"
                :value="index"
                :label="item"
              ></el-option>
            </el-select>
          </span>
          <span class="trips">选择读卡器默认的厂家的设备</span>
        </li>
        <li>
          <label>读卡器驱动设置</label>
          <span class="con">
            <el-select class="w-100" v-model="formdata.driveType" clearable size="small" placeholder="请选择">
              <el-option
                v-for="(item, index) in moreReadCardDriveArr"
                :key="index"
                :value="item"
                :label="item"
              ></el-option>
            </el-select>
          </span>
          <span class="trips">同一家医院，不同的读卡器机子可能存在驱动不一样的情况，0代表往市民卡参数的mode里传0，1则代表往mode里传1，对于市民卡刷不了的院区，可选择1试试</span>
        </li>
        <li>
          <label>执行科室代码过滤</label>
          <span class="con">
            <el-input
              type="text"
              v-model="formdata.eExeDepCodeFilArr"
              placeholder="若有多个,用'-'号隔开"
              size="mini"
              maxlength="500"
              clearable
              autocomplete="off">
            </el-input>
          </span>
          <span class="trips">根据执行科室代码过滤申请单列表,只显示包含这些执行科室代码的申请单,若有多个,用'-'号隔开</span>
        </li>
        <li>
          <label>申请单查询配置</label>
          <span class="con">
            <el-switch
              v-model="formdata.isShowTwoList"
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-text="是"
              inactive-text="否">
            </el-switch>
          </span>
          <span class="trips">查询申请单的时候是否同时先去查询已预约列表</span>
        </li>
        <li>
          <label>门诊不取缓存</label>
          <span class="con">
            <el-switch
              v-model="formdata.isSetStorageAreaName"
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-text="是"
              inactive-text="否">
            </el-switch>
          </span>
          <span class="trips">患者类型为门诊的时候，院区筛选框里的值不从缓存中读取(置空)</span>
        </li>
      </ul>
    </div>
    <div class="dialog-footer mar-t-10 flex flex-row justify-end" v-if="isshowbtn">
      <el-button size="small" @click="cancalEvent">取消</el-button>
      <el-button size="small" type="primary" @click="settingSend">保存</el-button>
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
// const CHECK_FORM_DEFAULT_KEY = 'CHECK_FORM_DEFAULT'
import { setLocalStorage, getLocalStorage } from '@/utils/localStorage' // removeLocalStorage
import { getIsShowTwoList, getIsSetStorageAreaName, setIsShowTwoList, setIsSetStorageAreaName } from '@/utils/utils'
import { getcheckrooms, getModalityTypeList, getDepAreaList, getDepList, getItemGroupList } from '@/api/api'
// import { getItemListFunc } from '@/api/common'
let string = '' // getLocalStorage('localSetMemory') || `{"modalitytype":"","depArea":"","areaName":"","dep":"","deps":[]}`
let localSetMemoryObj = null // JSON.parse(string)
import bus from '@/api/bus'
// import store from '@/store'
export default {
  props: {
    // 是否弹出右侧
    isshowbtn: {
      type: Boolean,
      default: true
    }
  },
  data() {
    string = getLocalStorage('localSetMemory') || `{"modalitytype":"","depArea":"","areaName":"","dep":"","deps":[]}`
    localSetMemoryObj = JSON.parse(string)
    console.log('data()=>localSetMemoryObj', localSetMemoryObj)
    return {
      inpatientWardOptions: [],
      dialogVisible: false,
      loading: false,
      appointSourceFlag: window.g.appointSourceFlag,
      userId: this.$store.state.user.id,
      userName: this.$store.state.user.userName,
      hospitalCode: this.$store.state.user.hospitalCode,
      hospitalName: this.$store.state.user.hospitalName,
      // isMoreReadCardCheck: window.g.isMoreReadCardCheck,
      // moreReadCardCheckStrArr: window.g.moreReadCardCheckArr,
      moreReadCardDriveArr: [0, 1],
      appointSourceNameList: window.g.appointSourceNameList,
      // appointSourceFlag: window.g.appointSourceFlag,
      modalitytypeOptions: [],
      depAreaOptions: [],
      // areaNameOptions: [], // 院区
      depOptions: [], // 检查部门
      appointTypeOptions: [],
      appoint_type: '',
      formdata: {
        registerRoom: getLocalStorage('UserPermision') || '',
        modalitytype: localSetMemoryObj.modalitytype,
        depArea: localSetMemoryObj.depArea,
        areaName: localSetMemoryObj.areaName,
        // appoint_type: localSetMemoryObj.appoint_type || '',
        dep: localSetMemoryObj.dep,
        deps: localSetMemoryObj.deps,
        inpatientWard: '',
        appointType: '',
        defaultReadCard: ~~(getLocalStorage('defaultReadCard')) || 0,
        driveType: 0,
        isShowTwoList: false,
        isSetStorageAreaName: false,
        eExeDepCodeFilArr: ''
      },
      registerRoomOptions: [],
      appointSourceNameLists: []
    }
  },
  watch: {},
  computed: {
    ...mapGetters(['wardNoOptions', 'areaNameOptions']),
    appConfig() {
      let appConfig = this.$store.state.settings.appConfig
      return appConfig
    },
    isChooseDeps() {
      return this.appConfig && this.appConfig.baseConfig && this.appConfig.baseConfig.isChooseDeps
    },
    isMoreReadCardCheck() { // 是否有多种品牌的读卡器
      return (this.appConfig && this.appConfig.baseConfig && this.appConfig.baseConfig.isMoreReadCardCheck) || window.g.isMoreReadCardCheck
    },
    moreReadCardCheckStrArr() { // 多种品牌的读卡器名称
      return (this.appConfig && this.appConfig.baseConfig && this.appConfig.baseConfig.moreReadCardCheckArr) || window.g.moreReadCardCheckArr
    }
  },
  async created() {
    // 赋值，以这里为主
    let localSetMemoryObjNew = JSON.parse((getLocalStorage('localSetMemory') || `{"modalitytype":"","depArea":"","areaName":"","dep":"","appoint_type":"","deps":[]}`))
    this.appointSourceNameLists = this.appointSourceNameList || ['自助预约', '移动预约']
    this.formdata = {
      registerRoom: getLocalStorage('UserPermision') || '',
      modalitytype: localSetMemoryObjNew.modalitytype,
      appointType: window.g.appointSourceFlag && !this.$hasPermission(['YJYY10008098']) && this.appointSourceNameLists.indexOf(localSetMemoryObjNew.appointType) != -1 ? '' : localSetMemoryObjNew.appointType,
      depArea: localSetMemoryObjNew.depArea,
      areaName: localSetMemoryObjNew.areaName,
      dep: localSetMemoryObjNew.dep,
      deps: localSetMemoryObjNew.deps,
      inpatientWard: localSetMemoryObjNew.inpatientWard,
      // appoint_type: localSetMemoryObjNew.appoint_type || '',
      defaultReadCard: ~~(getLocalStorage('defaultReadCard')) || 0,
      driveType: localSetMemoryObjNew.driveType,
      isShowTwoList: getIsShowTwoList(),
      isSetStorageAreaName: getIsSetStorageAreaName(),
      eExeDepCodeFilArr: localSetMemoryObjNew.eExeDepCodeFilArr
    }
    // this.getTypeOptions()
    // console.log('this.formdata', this.formdata)
    await this.getAreaNameList()
    this.getDepAreaAllList()
    this.getModalityTypeAllList()
    // this.getAreaNameAllList()
    this.getDepAllList()
    this.getTypeOptions()
    this.getcheckrooms()
    await this.getInpatientWard()
  },
  mounted() {
    // let localSetMemoryObjNew = JSON.parse((getLocalStorage('localSetMemory') || `{"modalitytype":"","depArea":"","areaName":"","dep":"","appoint_type":""}`))
    // this.formdata.appointType = window.g.appointSourceFlag && !this.$hasPermission(['YJYY10008098']) && this.appointSourceNameLists.indexOf(localSetMemoryObjNew.appointType) != -1 ? '' : localSetMemoryObjNew.appointType
  },
  methods: {
    cancalEvent() {
      this.$emit('close')
    },
    reset() {
      this.formdata = {
        registerRoom: '',
        modalitytype: '',
        depArea: '',
        areaName: '',
        // appoint_type: localSetMemoryObj.appoint_type || '',
        dep: '',
        deps: [],
        inpatientWard: '',
        appointType: '',
        defaultReadCard: 0,
        driveType: 0,
        isShowTwoList: false,
        isSetStorageAreaName: false,
        eExeDepCodeFilArr: ''
      }
    },
    async getAreaNameList() {
      if (this.areaNameOptions.length == 0) {
        console.log('set_areaNameOptions')
        let params = { HospitalCode: this.hospitalCode }
        await this.$store.dispatch('settings/set_areaNameOptions', params)
      }
      // let params = { HospitalCode: this.hospitalCode }
      // await this.$store.dispatch('settings/set_areaNameOptions', params)
    },
    async getInpatientWard() {
      // 病区
      // let data = {
      //   HospitalCode: this.hospitalCode,
      //   type: '申请病区'
      // }
      // getItemListFunc(data).then(res => {
      //   this.inpatientWardOptions = res.map(_item => _item.item)
      //   // this.groupOptions.wardNo = this.inpatientWardOptions
      // })
      if (!this.wardNoOptions.length) {
        let params = {
          HospitalCode: this.hospitalCode,
          type: '申请病区'
        }
        console.log('params', params)
        await this.$store.dispatch('settings/set_wardNoOptions', params)
      }
    },
    getTypeOptions() {
      // 如果在配置文件配置，则不在数据字段获取
      if (window.g.APPOINT_TYPE_OPTIONS) return
      // 获取预约来源
      let data = {
        HospitalCode: this.hospitalCode,
        type: '预约来源'
      }
      getItemGroupList(data).then(res => {
        // :disabled="appointSourceFlag && (appointSourceNameList || ['自助预约','移动预约']).includes(item)&&(!$hasPermission(['YJYY10008098']))"
        this.appointTypeOptions = res.content.list
        let appointChangeType = []
        if (window.g.appointSourceFlag) { // 是否开启预约来源角色权限控制
          this.appointTypeOptions.forEach((item, index) => {
            if (this.appointSourceNameLists.indexOf(item) != -1 && (!this.$hasPermission(['YJYY10008098']))) {
              appointChangeType.push({ id: index, label: item, disabled: true })
            } else {
              appointChangeType.push({ id: index, label: item, disabled: false })
            }
          })
          this.appointTypeOptions = appointChangeType
        } else {
          this.appointTypeOptions.forEach((item, index) => {
            appointChangeType.push({ id: index, label: item, disabled: false })
          })
          this.appointTypeOptions = appointChangeType
        }
        console.log('this.appointTypeOptions', this.appointTypeOptions)
        // 权限代码对应预约来源
        const appointKeyToName = {
          'YJYY1000809790': '移动预约',
          'YJYY1000809791': '外院预约',
          'YJYY1000809792': '自助预约',
          'YJYY1000809781': '临床预约',
          'YJYY1000809793': '前台登记',
          'YJYY1000809794': '联合预约',
          'YJYY1000809795': '转诊预约',
          'YJYY1000809782': '登记机房',
          'YJYY1000809783': '检查科室',
          'YJYY1000809785': '预约中心'
        }
        let appointTypeOptions = []
        // 把有权限的预约来源push到appointTypeOptions中
        Object.keys(appointKeyToName).forEach(key => {
          // const code = 'YJYY1000809786'
          // console.log(`this.$hasPermission([${key}])`, this.$hasPermission([key]))
          if (this.$hasPermission([key])) {
            // appointKeyToName[key]
            appointTypeOptions.push({ id: key, label: appointKeyToName[key], disabled: false })
          }
        })
        if (appointTypeOptions.length) this.appointTypeOptions = appointTypeOptions
        // console.error('window.g.appointSourceFlag', this.appointTypeOptions)
      })
    },
    getUserData() {
      if (getLocalStorage('UserPermision')) {
        this.form.registerRoom = getLocalStorage('UserPermision')
      }
    },
    changeIsShowTwoList(data) {
      console.log('changeIsShowTwoList=>data', data)
    },
    getFormData() {
      return this.formdata
    },
    setFormData(data) {
      console.log('setFormData=>data', data)
      this.formdata = data
    },
    settingSend() {
      // 获取用户权限配置
      this.loading = true
      setLocalStorage('UserPermision', this.formdata.registerRoom)
      let localSetMemory = {
        modalitytype: this.formdata.modalitytype || '',
        appointType: this.formdata.appointType || '',
        depArea: this.formdata.depArea || '',
        areaName: this.formdata.areaName || '',
        dep: this.formdata.dep || '',
        deps: this.formdata.deps || [],
        inpatientWard: this.formdata.inpatientWard || '',
        registerRoom: this.formdata.registerRoom || '',
        isShowTwoList: this.formdata.isShowTwoList || false,
        isSetStorageAreaName: this.formdata.isSetStorageAreaName || false,
        driveType: this.formdata.driveType,
        eExeDepCodeFilArr: this.formdata.eExeDepCodeFilArr
      }
      setLocalStorage('localSetMemory', JSON.stringify(localSetMemory))
      setIsShowTwoList(this.formdata.isShowTwoList || false)
      setIsSetStorageAreaName(this.formdata.isSetStorageAreaName || false)
      // let checkFromDefault = JSON.parse(getLocalStorage(CHECK_FORM_DEFAULT_KEY))
      // console.log('checkFromDefault', checkFromDefault)
      // let newCheckFromDefault = Object.assign({}, checkFromDefault, localSetMemory)
      // console.log('newCheckFromDefault', newCheckFromDefault)
      // getLocalStorage(CHECK_FORM_DEFAULT_KEY, newCheckFromDefault)
      if (this.isMoreReadCardCheck) {
        setLocalStorage('defaultReadCard', this.formdata.defaultReadCard)
      }
      this.createIframeCallBack().then(() => {
        // var data = {
        //   type: 'saveClientCache',
        //   data: {
        //     key: 'areaName',
        //     value: this.formdata.areaName
        //   }
        // }
        // this.$nextTick(() => {
        //   document.getElementById('_iframe') && document.getElementById('_iframe').postMsg(data, '*')
        // })
        bus.$emit('checkPostMsg', {
          type: 'saveClientCache',
          data: {
            key: 'areaName',
            value: this.formdata.areaName
          }
        })
        this.emitIframeCallBack()
      }).finally(() => {
        this.$message.success('保存成功')
        this.dialogVisible = false
        setTimeout(() => {
          window.location.reload()
        }, 1000)
      })
    },
    // 创建一个iframe 放临床预约
    createIframeCallBack() {
      let iframeIdString = '_iframe'
      return new Promise((resolve, reject) => {
        if (!document.getElementById(iframeIdString)) {
          let iframe
          iframe = document.createElement('iframe')
          iframe.id = '_iframe'
          document.body.appendChild(iframe)
          iframe.src = window.g.APPOINT_URL + '/index.html'
          iframe.style.cssText = 'width: 100px; height: 100px;'
          iframe.onload = function () {
            resolve()
          }
          iframe.onerror = function () {
            reject()
          }
        } else {
          resolve()
        }
      })
    },
    // 回调临床预约的函数
    emitIframeCallBack() {
      this.$message.success('保存成功')
      this.dialogVisible = false
      setTimeout(() => {
        window.location.reload()
      }, 1000)
    },
    getModalityTypeAllList() {
      const params = {
        HospitalCode: this.$store.state.user.hospitalCode,
        depArea: this.formdata.depArea,
        areaName: this.formdata.areaName,
        dep: this.isChooseDeps ? this.formdata.deps : this.formdata.dep
      }
      return getModalityTypeList(params).then(res => {
        if (res && res.code === 10000) {
          let depTypes = res.content.list
          this.modalitytypeOptions = depTypes
        }
      })
    },
    // getTypeOptions() {
    //   // 如果在配置文件配置，则不在数据字段获取
    //   if (window.g.APPOINT_TYPE_OPTIONS) return
    //   // 获取预约来源
    //   let data = {
    //     HospitalCode: this.hospitalCode,
    //     type: '预约来源'
    //   }
    //   getItemListFunc(data).then(res => {
    //     const ats = res.map(_item => _item.item).filter(ap => ap)
    //     this.appointTypeOptions = ats
    //     if (this.$hasPermission(['YJYY1000809781'])) {
    //       this.appointTypeOptions = ['临床预约']
    //       this.appoint_type = '临床预约'
    //     }
    //     // console.log('this.appointTypeOptions', this.appointTypeOptions)
    //     // this.getFormDefaultLoaclStorage()
    //   })
    // },
    async depAreaChange() {
      this.formdata.modalitytype = ''
      this.formdata.dep = ''
      this.formdata.deps = []
      await this.getModalityTypeAllList()
      await this.getDepAllList()
      await this.getcheckrooms()
    },
    async depChange() {
      this.formdata.modalitytype = ''
      await this.getcheckrooms()
      await this.getModalityTypeAllList()
    },
    async modalitytypeChange() {
      this.formdata.registerRoom = ''
      await this.getcheckrooms()
    },
    async areaNameChange() {
      this.formdata.depArea = ''
      this.formdata.dep = ''
      this.formdata.modalitytype = ''
      await this.getDepAreaAllList()
      await this.getModalityTypeAllList()
      await this.getDepAllList()
      await this.getcheckrooms()
    },
    getDepAreaAllList() {
      let params = {
        HospitalCode: this.hospitalCode,
        DepArea: this.formdata.depArea,
        areaName: this.formdata.areaName
      }
      if (!this.formdata.depArea) {
        delete params.DepArea
      }
      return getDepAreaList(params).then(res => {
        if (res && res.code === 10000) {
          this.depAreaOptions = res.content.list
        }
      })
    },
    // getAreaNameAllList() {
    //   let params = {
    //     HospitalCode: this.hospitalCode
    //   }
    //   return getListByAreaName(params).then(res => {
    //     if (res && res.code === 10000) {
    //       this.areaNameOptions = res.content.list
    //     }
    //   })
    // },
    getDepAllList() {
      const params = {
        HospitalCode: this.hospitalCode,
        DepArea: this.formdata.depArea,
        areaName: this.formdata.areaName
      }
      return new Promise(async resolve => {
        await getDepList(params).then(res => {
          this.depOptions = res.content.list
          console.log('this.depOptions', this.depOptions)
        })
        resolve()
      })
    },
    // 获取所有机房
    getcheckrooms() {
      let data = {
        hospitalCode: this.hospitalCode,
        areaName: this.formdata.areaName,
        depArea: this.formdata.depArea,
        dep: this.isChooseDeps ? this.formdata.deps : this.formdata.dep,
        ModalityType: this.formdata.modalitytype
      }
      getcheckrooms(data).then(res => {
        this.loading = false
        if (res && res.code === 10000) {
          this.registerRoomOptions = []
          res.content.list.forEach(item => {
            this.registerRoomOptions.push(item.checkRoom)
          })
          this.getUserData()
        }
      }).catch(() => {
        this.loading = false
      })
    }
  }
}
</script>
<style lang="scss" scoped>
// /deep/ .w-100{
//  width: 160px !important;
// }
.ca_config_ul{
  width: 100%;
  display: flex;
  ul{
    width: 100%;
    margin: 0;
    padding: 0;
    border-bottom: 1px solid #EBEEF5;
    &:nth-child(1){
      border-left: 1px solid #EBEEF5;
    }
    &:nth-child(2){
      background: #FAFAFA;
    }
    li{
      display: flex;
      align-items: center;
      width: 100%;
      border-top: 1px solid #EBEEF5;
      border-right: 1px solid #EBEEF5;
      margin: 0;
      height: 42px;
      line-height: 42px;
      box-sizing: border-box;
      padding: 0 10px;
      color: #606266;
      label{
        width: 15%;
        min-width: 130px;
        font-weight: normal;
      }
      .con{
         width: 25%;
         border-left: 1px solid #EBEEF5;
         border-right: 1px solid #EBEEF5;
         box-sizing: border-box;
         padding: 0 10px;
         /deep/ .el-input--medium .el-input__inner{
          height: 32px;
          line-height: 32px;
         }
         // /deep/ .w-100{
         //  width: 160px !important;
         // }
      }
      .trips{
        width: 60%;
         box-sizing: border-box;
         padding: 0 5px 0 10px;
         line-height: 18px;
         color: #999;
         font-size: 13px;
      }
      &:nth-child(1){
        background: #00C0EF;
        color: #Fff;
        font-weight: 500;
        label{
          font-weight: 500;
        }
        .trips{
          color: #fff;
        }
      }
    }
  }
}
</style>
